<template>
  <el-col :span="20">
        <el-menu>
            <el-sub-menu index="1">
                <template #title>
                    <el-icon><List/></el-icon>
                    <span style="font-size: 15px;">公告</span>
                </template>
                <el-menu-item id="msgItem" v-for="(Notice, index) in Notices" :key="index" :index="'notice-'+Notice.letterId">
                        <router-link id="msgA" :to="{name:'Notice' , params:{noticeId:Notice.letterId}}">
                            <div id="itemdiv">
                                <span style="margin-right: auto;">{{Notice.sender}}</span>
                                <span style="color: gray;">{{formatDate(Notice.sendTime) }}</span>
                                <span id="dot" v-if="Notice.view===0"></span>
                            </div>
                        </router-link>
                </el-menu-item>
                <el-menu-item  v-if="getAdmin() === '2'">
                    <router-link :to="{name: 'NewNotice'}">+新建公告</router-link>
                </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2" >
                <template #title>
                    <el-icon><Message/></el-icon>
                    <span style="font-size: 15px;">咨询</span>
                </template>
                <el-menu-item id="msgItem" v-for="(Question, index) in Questions" :key="index" :index="'ques-'+Question.letterId">
                        <router-link id="msgA" :to="{name:'Question' , params:{questionId:Question.letterId}}">
                            <div id="itemdiv">
                                <span style="margin-right: auto;">{{Question.sender}}</span>
                                <span style="color: gray;">{{formatDate(Question.sendTime) }}</span>
                                <span id="dot" v-if="Question.view===0"></span>
                            </div>
                        </router-link>
                </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3" >
                <template #title>
                    <el-icon><ChatDotSquare/></el-icon>
                    <span style="font-size: 15px;">邮件</span>
                </template>
                <el-menu-item id="msgItem" v-for="(Email, index) in Emails" :key="index" :index="'email-'+Email.letterId">
                        <router-link id="msgA" :to="{name:'Email' , params:{letterId:Email.letterId}}">
                            <div id="itemdiv">
                                <span style="margin-right: auto;">{{Email.sender}}</span>
                                <span style="color: gray;">{{formatDate(Email.sendTime) }}</span>
                                <span id="dot" v-if="Email.view===0"></span>
                            </div>
                        </router-link>
                </el-menu-item>
                <el-menu-item  v-if="admin === '1'|| admin === '0'">
                    <router-link :to="{name: 'NewEmail'}">+  写邮件</router-link>
                </el-menu-item>
            </el-sub-menu>
            <el-menu-item @click="back=>{this.$router.push({name:'Main'})}" index="4">
                <el-icon><Back/></el-icon>
                <span >返回</span>
            </el-menu-item>
        </el-menu>
    </el-col>
</template>

<script>
import axios, { AxiosError } from 'axios'
export default {
    name:   'NavBar',
    data() {
        return{
            Notices:[],
            Questions:[],
            Emails:[],
            username : localStorage.getItem('username'),
            admin: localStorage.getItem('admin')
        }
    },
    methods:{
        formatDate(sendTime){
            const date = new Date(sendTime);
            let month = date.getMonth() + 1; 
            month = month < 10 ? month : String(month);
            const day = String(date.getDate()).padStart(2, '0');
            return `${month}-${day}`;
        },
        getAdmin(){
            //管理员返回2，其他返回0/1
            return localStorage.getItem('admin')
        },
    //使用结构赋值进行异常处理
    promise_error_process(promise){
        return promise.then(data=>[null,data])
                        .catch(err=>[err,null])
    },
    async getColumnByAjax(){
        const response = await axios({
        url				: `http://127.0.0.1:8080/api/column/${this.username}`,
        method			: 'GET',
        withCredentials : true
        })
        return response
    },
    async getColumn(){
        const [err,result] = await this.promise_error_process(this.getColumnByAjax())
        if(err){
          console.log('请求异常')
        }
        else{
            console.log(result)
                result.data.data.sysMsgs.forEach(item => {
                if(item.msgType === 0){
                    this.Emails.push(item);
                }
                else if(item.msgType === 1){
                    this.Questions.push(item);
                }
                else if(item.msgType === 2){
                    this.Notices.push(item);
                }
            });
            console.log('Emails:', this.Emails);
            console.log('Questions:', this.Questions);
            console.log('Notices:', this.Notices);
        }
      }
    },
    created(){
        this.getColumn();
    }
}
</script>

<style scoped>
    #dot {
        width: 8px;
        height: 8px;
        background-color: red;
        border-radius: 50%;
        margin-left: 10px;
    }
    #msgA{
        width:90%;
    }
    a{
        text-decoration: none;
        color:#303133;
    }
    a:hover{
        color: #579cfd;
    }
    .router-link-active{
        color: #579cfd;
    }
    #msgItem{
        padding: 0px 0px 0px 30px;
    }
    #itemdiv{
        display: flex;
        align-items: center;
        width: 100%;
    }
    .el-col{
        height: 100%;
    }
    .el-menu{
        height: 100%;
    }
    .el-menu:first-child{
        padding-top: 20px;
    }
</style>